<template>
    <div class="week">
        <p>周末去哪</p>
        <ul>
            <li v-for="(item,key) in weekList" :key="key" class="border-bottom">
                <div class="keep-content">
                    <img :src="item.image" alt="">
                </div>
                <div>
                    <h4>{{item.name}}</h4>
                    <p>{{item.desc}}</p>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "recommend",
        props:{
            weekList:{type:Array}
        }
    }
</script>

<style lang="scss" scoped>
    @import "~css/main.scss";
    @import "~css/varibles.scss";
 .week{
     >p:first-child{
         padding:.24rem 0 .24rem .2rem;
         background-color:$bgcolor-p;
     }
     >ul>li{
         padding-bottom:.3rem ;
         .keep-content{
             height:0;
             overflow: hidden;
             width: 100%;
             padding-bottom: 50%;
             img{
                 width:100%;
             }
         }
         >div:last-child{
             padding:.2rem ;
             >h4{
                 font-size: .3rem;
                 font-weight:bold;
             }
             >p{
                 margin-top: .2rem;
                 @include ellipsis();
             }
         }
     }
 }
</style>
